<template>
	<q-search v-model="searchParams" :config="searchConfig" />
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import $dateFormat from '@q-admin-design-vue/utils/DateFormat';

	const searchForm = [
		{
			componentType: 'text',
			key: 'channelName',
			label: '输入框：',
		},
		{
			componentType: 'select',
			key: 'channelName1',
			label: '选择器：',
			options: [
				{
					value: '1',
					label: '渠道名称1',
				},
			],
		},
		{
			componentType: 'select-v2',
			key: 'channelName2',
			label: '虚拟列表选择器：',
			options: [
				{
					value: '2',
					label: '渠道名称2',
				},
			],
		},
		{
			componentType: 'datePicker',
			type: 'year',
			key: '日期',
			label: '日期器：',
		},
		{
			componentType: 'dateRangPicker',
			type: 'datetimerange',
			key: 'channelName8',
			label: '日期时间区间器：',
			dateFormat: 'YYYY-MM-DD HH:mm:ss',
			valueFormat: 'x',
			defaultValue: [
				$dateFormat.dateTime(`${$dateFormat.subtractDay(29)} 00:00:00`),
				$dateFormat.dateTime(`${$dateFormat.subtractDay(0)} 23:59:59`),
			],
		},
	];

	const searchParams = ref({});
	const searchConfig = ref({
		labelWidth: 105,
		handlerSearch({ params, type }) {
			/**
			 * params: 搜索项 绑定值
			 * type: 按钮类型 searchForm：搜索按钮  resetForm：重置按钮
			 */
			console.log(params, type);
		},
		handleCollapse() {
			// return commonTable.value.onResize();
		},
		// 配置表头内容
		formConfigList: searchForm,
	});
</script>
